import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity, Alert, StyleSheet, PixelRatio, TextInput, Platform } from 'react-native';
import { GLOBAL } from '../../config/global';
const scale = GLOBAL.SCALE;
let arrow = require('../../imgs/arrow.png');
let titleImgObj = require('../../imgs/global/query.png');
/*
type:input select textarea 自定义
label:String/Number  左边文本
tagLogo:JXSObject 采或者销售标签
border:Boolean 是否带底部border
value:String/Number 右边文本
placeHolder:String/Number 没有内容时的提示
handleCallBack:Function 点击/输入(input)的回调
rightIcon:image 右侧图标
rightText:String/Number  右侧文本
info:String/Number  标题后面的多余信息

rightContent:右边为自定义内容
disable(select):Boolean handleCallBack回调是否触发

textPress(input):Function rightText的点击事件
keyboardType(input):String 键盘类型
editable(input):Boolean 输入框是否可编辑
*/
export class FormItem extends Component {
	constructor(props) {
		super(props);
	}


	//问号 功能在开发
	_titleImgCallBack = (iconText) => {
		Alert.alert('提示', iconText, [
			{
				text: '知道了',
			}
		])
	}

	renderLeft() {
		let { required, label, tagLogo, styleObj, labelStyle, info } = this.props;
		let { labelColor, size } = styleObj || {};
		return <View style={styles.left}>
			<View style={styles.requiredWrap}>{required ? <Text style={styles.required}>*</Text> : null}</View>
			<Text style={[labelColor ? { color: labelColor } : styles.labelColor,
			size === 'small' ? styles.smallLabelSize : styles.labelSize, labelStyle || null]}>{label}</Text>
			{info ? (<Text style={styles.info}>{'(' + info + ')'}</Text>) : null}
			{tagLogo ? <View style={styles.tag} >{tagLogo}</View> : null}
		</View>
	}



	renderCustom() {
		let { rightContent, border, styleObj } = this.props;
		let { size } = styleObj || {};
		return (
			<View style={[styles.container, border ? styles.border : null, { alignItems: 'flex-start', paddingTop: 13 * scale, paddingBottom: 13 * scale }]}>
				{this.renderLeft()}
				<View>{rightContent}</View>
			</View >)
	}

	renderSelect() {
		let { value, placeHolder, disable, handleCallBack, border, rightIcon, rightText, styleObj, rightIconStyle, } = this.props;
		let { size, valueStyle } = styleObj || {};
		return (
			<TouchableOpacity activeOpacity={.6} style={[disable ? styles.disableStyle : null, styles.container, border ? styles.border : null,
			size === 'small' ? styles.smallCon : styles.normalCon]} onPress={() => {
				if (disable) return;
				handleCallBack && handleCallBack();
			}}>
				{this.renderLeft()}
				<View style={[styles.right, { flexDirection: 'row', alignItems: 'center', height: '100%' }]}>
					<Text numberOfLines={1} style={[value ? styles.value : styles.placeHolder, { maxWidth: 220 * scale, paddingLeft: 2 * scale }, valueStyle || null]}>{value || placeHolder || ''}</Text>
					{rightText ? <Text style={styles.fontSize14}>{rightText}</Text> : null}
					{disable ? null : <Image style={[styles.arrow, rightIconStyle || null]} source={rightIcon ? rightIcon : arrow} />}
				</View>
			</TouchableOpacity >)
	}

	renderInput() {
		let { label, type, value, placeHolder, handleCallBack, border, rightText, textPress, keyboardType, editable, rightIcon, rightIconStyle, styleObj, onBlurFn, onFocusFn, sizeType, inputStyle, rightTextStyle, returnKeyType, iconText } = this.props;
		value = value || value === 0 ? value + '' : '';
		let { size } = styleObj || {};
		let isChange = null;

		for (item in this.props) {
			if (item == 'editableStyle') {
				isChange = !editable;
			}
		}


		return (
			<View style={[isChange ? styles.disableStyle : null, styles.container, border ? styles.border : null,
			size === 'small' ? styles.smallCon : styles.normalCon, sizeType && sizeType == 'small' ? { width: 226 * scale } : null, (type === 'mutiInput' && !editable) ? { height: 'auto' } : null]} >
				{this.renderLeft()}
				<View style={styles.right}>
					<TextInput
						returnKeyType={returnKeyType || 'done'}
						defaultValue={value}
						keyboardType={keyboardType || 'default'}
						style={[{
							height: '100%', textAlign: 'right', alignItems: 'center',
							paddingVertical: 0
						},
						(sizeType && sizeType == 'small') ? { width: 80 * scale } : { maxWidth: 190 * scale, minWidth: 150 * scale },
						styles.value, inputStyle || null]}
						multiline={type === 'mutiInput'}
						editable={editable}
						placeholder={placeHolder}
						placeholderTextColor={"#eee"}
						underlineColorAndroid='transparent'
						onBlur={(text) => {
							onBlurFn && onBlurFn(text)
						}}
						onFocus={() => {
							onFocusFn && onFocusFn()
						}}
						onChangeText={(text) => {
							handleCallBack && handleCallBack(text);
						}} />
					{rightText || rightIcon ? <TouchableOpacity activeOpacity={.6} style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => {
						textPress && textPress()
					}}>
						{rightText ? <Text style={[{ marginLeft: 10 * scale }, rightTextStyle ? rightTextStyle : null, styles.fontSize14]}>{rightText}</Text> : null}
						{rightIcon ? <Image style={[styles.arrow, rightIconStyle || null]} source={rightIcon ? rightIcon : arrow} /> : null}
						{iconText ? <TouchableOpacity onPress={() => { this._titleImgCallBack(iconText) }} style={{ padding: 7 * scale }}><Image source={titleImgObj}></Image></TouchableOpacity> : null}
					</TouchableOpacity> : null}
				</View>
			</View>)
	}

	renderTextarea() {
		let { value, placeHolder, handleCallBack } = this.props;
		value = value || value === 0 ? value + '' : '';
		return (
			<View style={{ paddingLeft: 13 * scale, paddingRight: 13 * scale, marginTop: 12 * scale }}>
				{this.renderLeft()}
				<View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 16 * scale }}>
					<TextInput style={styles.textarea}
						defaultValue={value}
						multiline={true}
						placeholder={placeHolder || ''}
						onChangeText={(text) => {
							handleCallBack && handleCallBack(text);
						}} />
				</View>
			</View>
		)
	}

	render() {
		let { type, rightContent } = this.props;
		if (rightContent) {
			return (this.renderCustom());
		} else if (!type || type === 'select') {
			return (this.renderSelect());
		} else if (type && type == 'textarea') {
			return (this.renderTextarea());
		} else {
			return (this.renderInput());
		}
	}
}

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		paddingLeft: 13 * scale,
		paddingRight: 24 * scale
	},
	normalCon: {
		// paddingTop: 13 * scale,
		// paddingBottom: 13 * scale
		height: 42 * scale,
	},
	smallCon: {
		// paddingTop: 9 * scale,
		// paddingBottom: 9 * scale
		height: 34 * scale
	},
	border: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
	},
	required: {
		fontSize: 14 * scale,
		color: '#D0021B',
	},
	requiredWrap: {
		width: 10 * scale,
		paddingRight: 3 * scale
	},
	labelColor: {
		color: '#333',
	},
	labelSize: {
		fontSize: 14 * scale
	},
	smallLabelSize: {
		fontSize: 12 * scale
	},
	left: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	right: {
		flexDirection: 'row',
		alignItems: 'center'
	},
	arrow: {
		marginLeft: 5 * scale,
		tintColor: '#333'
	},
	placeHolder: {
		fontSize: 14 * scale,
		color: '#eee',
		fontWeight: 'bold'
	},
	value: {
		fontSize: 14 * scale,
		color: '#333',
		fontWeight: 'bold'
	},
	tag: {
		height: 22 * scale,
		width: 22 * scale,
		paddingTop: 3 * scale,
		marginLeft: 5 * scale
	},
	info: {
		paddingLeft: 3 * scale,
		fontSize: 14 * scale
	},
	fontSize14: { fontSize: 14 * scale },
	textarea: {
		width: 312 * scale,
		height: 128 * scale,
		borderWidth: 1 * scale,
		borderStyle: 'solid',
		borderColor: '#E3E7F0',
		borderRadius: 2 * scale,
		paddingTop: 4 * scale,
		paddingRight: 4 * scale,
		paddingLeft: 4 * scale,
		paddingBottom: 4 * scale,
	},
	disableStyle: {
		opacity: .5
	}
})